<style lang="less" scoped>
.login{
  height: 100vh;
  background: #141A28;
  box-sizing: border-box;
  padding: 92px 40px 20px;
  .register-btn{
    width: 99px;
    height: 55px;
    border: 2px solid #FFF;
    float: right;
    font-size: 26px;
    font-weight: 400;
    line-height: 55px;
  }
  .title{
    font-size: 30px;
    font-weight: 400;
    color: #FFFFFF;
    padding: 77px 0 50px 0;
  }
  .form-row{
    height: 69px;
    margin-bottom: 20px;
    font-size: 24px;
    color: #8791A8;
    display: flex;
    padding: 0 25px;
    align-items: center;
    background: #222836;
    input{
      flex: 1;
      height: 100%;
      background: rgba(0, 0, 0, 0);
    }
    img{
      width: 33px;
    }
    .hidepwd{
      width: 34px;
    }
  }
  .loss-pwd{
    float: right;
    font-size: 24px;
    font-weight: 400;
    color: #FFF;
    margin-top: 28px;
  }
  .loss{
    overflow: hidden;
  }
  .action-btn{
    width: 606px;
    height: 81px;
    background: #FFA22A;
    margin: 70px auto 0;
    text-align: center;
    line-height: 81px;
    font-size: 30px;
    font-weight: 400;
    color: #000;
    margin-bottom: 35px;
  }
}
</style>

<template>
  <div class="login">
    <top-bar>
    </top-bar>
    <div class="title">修改密码</div>
    <div class="form-row">
      <input v-model="state.phone" maxlength="11" minlength="11" type="number" placeholder="请输入手机号">
    </div>
    <div class="form-row">
      <input v-model="state.code" maxlength="4" type="number" placeholder="请输入短信验证码">
      <p @click="getCode">{{state.getcodetext}}</p>
    </div>
    <div class="form-row">
      <input v-model="state.password" maxlength="20" :type="state.showPassword ? 'text' : 'password'" placeholder="请输入密码">
      <img v-show="state.showPassword" @click="state.showPassword = false" src="../../assets/images/showpsd.png" alt="">
      <img v-show="!state.showPassword" class="hidepwd" @click="state.showPassword = true" src="../../assets/images/hidepsd.png" alt="">
    </div>
    <div class="action-btn" @click="reset">保存</div>
  </div>
</template>

<script>
import { reactive } from "vue";
import { Toast  } from 'vant'
import { useRouter } from 'vue-router'
import { resetPassword, phoneCode } from '../../api/home.js'
import { useStore } from 'vuex'
export default {
  setup() {
    const store = useStore()
    const router = useRouter()
    const state = reactive({
      showPassword: false,
      phone: '',
      password: '',
      code: '',
      getcodetext: '获取验证码',
      allowGetCode: true
    })
    const reset = async () => {
      if (!state.phone) {
        Toast.fail('请输入手机号')
        return false
      }
      if (!state.password) {
        Toast.fail('请输入密码')
        return false
      }
      if (!state.code) {
        Toast.fail('请输入验证码')
        return false
      }
      const res = await resetPassword({
        mobile: state.phone,
        passWord: state.password,
        code: state.code
      })
      if (res.code === 200) {
        Toast.success('修改成功')
        try {
          router.go(-1)
        } catch {
          router.push({
            path: '/'
          })
        }
      } else {
        Toast.fail(res.msg)
      }
    }
    let time = 60,timer = null
    const getCode = async () => {
      if (!state.allowGetCode) {
        return false
      }
      if(!state.phone) {
        Toast.fail('请输入手机号')
        return false
      }
      state.allowGetCode = false
      const res = await phoneCode({ mobile: state.phone })
      // if (res.code === 200) {
        time = 60
        timer = setInterval(() => {
          state.getcodetext = `已发送(${time})`
          if (time > 0) {
            time --
          } else {
            state.getcodetext = '获取验证码'
            state.allowGetCode = true
            clearInterval(timer)
          }
        }, 1000)
      // }
    }
    return {
      reset,
      state,
      getCode
    }
  }
}
</script>